<template>
  <div class="container">
    <div class="top-wrap">
      <h4 class="title">公司资质认证</h4>
      <div class="content">
        <ul class="prove-wrap">
          <li v-if="!ServiceProveData.is_three_card">
            <div class="prove-title"><span style="color: red">*</span>
              营业执照
            </div>
            <div class="picture-wrap">
              <img
                :src="ServiceProveData.business_license_electronic"
                width="100%"
                height="100%"
                alt="营业执照"
                @click="previewLicense">
              <el-dialog :visible.sync="dialogVisibleLicense">
                <img :src="ServiceProveData.business_license_electronic" width="100%" height="100%" alt="营业执照">
              </el-dialog>
            </div>
            <div class="date-text">证书有效期：{{ ServiceProveData.license_electronic_starttime }}
              <span v-if="!ServiceProveData.license_electronic_islong">
                -{{ ServiceProveData.license_electronic_endtime }}
              </span>
              <div v-if="ServiceProveData.license_electronic_islong">长期有效</div>
            </div>
          </li>
          <li v-if="!ServiceProveData.is_three_card">
            <div class="prove-title"><span style="color: red">*</span>
              组织机构代码证
            </div>
            <div class="picture-wrap">
              <img
                :src="ServiceProveData.business_organization_electronic"
                width="100%"
                height="100%"
                alt="组织机构代码证"
                @click="previewOrganization">
              <el-dialog :visible.sync="dialogVisibleOrganization">
                <img :src="ServiceProveData.business_organization_electronic" width="100%" height="100%" alt="组织机构代码证">
              </el-dialog>
            </div>
            <div class="date-text">证书有效期：{{ ServiceProveData.organization_electronic_starttime }}
              <span v-if="!ServiceProveData.organization_electronic_islong">
                -{{ ServiceProveData.organization_electronic_endtime }}
              </span>
              <div v-if="ServiceProveData.organization_electronic_islong">长期有效</div>
            </div>
          </li>
          <li v-if="!ServiceProveData.is_three_card">
            <div class="prove-title"><span style="color: red">*</span>
              税务登记证
            </div>
            <div class="picture-wrap">
              <img :src="ServiceProveData.tax_registration" width="100%" height="100%" alt="税务登记证" @click="previewTax">
              <el-dialog :visible.sync="dialogVisibleTax">
                <img :src="ServiceProveData.tax_registration" width="100%" height="100%" alt="税务登记证">
              </el-dialog>
            </div>
            <div class="date-text">证书有效期：{{ ServiceProveData.tax_registration_starttime }}
              <span v-if="!ServiceProveData.tax_registration_islong">
                -{{ ServiceProveData.tax_registration_endtime }}
              </span>
              <div v-if="ServiceProveData.tax_registration_islong">长期有效</div>
            </div>
          </li>
          <li v-if="ServiceProveData.is_three_card">
            <div class="prove-title"><span style="color: red">*</span>
              三证合一
            </div>
            <div class="picture-wrap">
              <img :src="ServiceProveData.three_card_image" width="100%" height="100%" alt="三证合一" @click="previewThree">
              <el-dialog :visible.sync="dialogVisibleThree">
                <img :src="ServiceProveData.three_card_image" width="100%" height="100%" alt="三证合一">
              </el-dialog>
            </div>
            <div class="date-text">证书有效期：{{ ServiceProveData.three_card_starttime }}
              <span v-if="!ServiceProveData.three_card_islong">
                -{{ ServiceProveData.three_card_endtime }}
              </span>
              <div v-if="ServiceProveData.three_card_islong">长期有效</div>
            </div>
          </li>
          <li v-if="ServiceProveData.other_prove">
            <div class="prove-title"><span style="color: red">*</span>
              其他证明材料
            </div>
            <div class="picture-wrap">
              <img :src="ServiceProveData.other_prove" width="100%" height="100%" alt="其他证明材料" @click="previewOther">
              <el-dialog :visible.sync="dialogVisibleOther">
                <img :src="ServiceProveData.other_prove" width="100%" height="100%" alt="其他证明材料">
              </el-dialog>
            </div>
            <div class="date-text">证书有效期：{{ ServiceProveData.other_prove_starttime }}
              <span v-if="!ServiceProveData.other_prove_islong">
                -{{ ServiceProveData.other_prove_endtime }}
              </span>
              <div v-if="ServiceProveData.other_prove_islong">长期有效</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom-wrap">
      <h4 class="title">对公账户信息</h4>
      <ul class="content">
        <li class="item-wrap">
          <div class="item-label">开户名称</div>
          <div class="item-content">{{ ServiceProveData.bank_account_name }}</div>
        </li>
        <li class="item-wrap">
          <div class="item-label">开户银行</div>
          <div class="item-content">{{ ServiceProveData.bank_name }}</div>
        </li>
        <li class="item-wrap">
          <div class="item-label">银行账号</div>
          <div class="item-content">{{ ServiceProveData.bank_account_number }}</div>
        </li>
      </ul>

    </div>
  </div>

</template>
<script>
import { getServiceProveInfo, getServiceInfo, getServiceType } from '@/api/serviceinfo'

export default {
  name: 'Qualification',
  data() {
    return {
      ServiceProveData: {},
      showServiceType: '',
      form: '',
      ServiceType: '',
      dialogVisibleLicense: false,
      dialogVisibleOrganization: false,
      dialogVisibleTax: false,
      dialogVisibleThree: false,
      dialogVisibleOther: false
    }
  },
  created() {
    this.getServiceProveInfo()
  },
  methods: {
    // 获取证明信息
    getServiceProveInfo() {
      getServiceProveInfo().then(response => {
        if (response.status === 200) {
          this.ServiceProveData = response.data
        } else {
          this.$message({
            type: 'danger',
            message: response.msg
          })
        }
      })
    },
    previewLicense() {
      this.dialogVisibleLicense = true
    },
    previewOrganization() {
      this.dialogVisibleOrganization = true
    },
    previewTax() {
      this.dialogVisibleTax = true
    },
    previewThree() {
      this.dialogVisibleThree = true
    },
    previewOther() {
      this.dialogVisibleOther = true
    },

    getServiceType() {
      getServiceType().then(response => {
        if (response.status === 200) {
          this.ServiceType = response.data
          this.showServiceType = ''
          for (let i = 0; i < this.ServiceType.length - 1; i++) {
            for (let j = 0; j < this.form.service_types.length - 1; j++) {
              if (this.ServiceType[i].service_type_id === this.form.service_types[j]) {
                this.showServiceType += this.ServiceType[i].service_type_name + ' , '
              }
            }
            this.showServiceType = this.showServiceType.slice(0, -1)
          }
        }
      })
    }
  }
}
</script>
<style rel="stylesheet" lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .top-wrap {
    width: 800px;
  }

  .bottom-wrap {
    width: 800px;
  }

  .title {
    font-size: 14px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e9e9e9;
  }

  .content {
    padding-left: 50px;
  }

  .picture-wrap {
    width: 200px;
    height: 180px;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .item-wrap {
    display: flex;
    padding-top: 25px;
  }

  .item-label {
    width: 140px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: rgba(102, 102, 102, 1);
    line-height: 21px;
  }

  .item-content {
    width: 400px;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 25px;
    line-height: 21px;
  }

  .date-text {
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: rgba(102, 102, 102, 1);
    line-height: 16px;
  }

  .prove-wrap {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-right: 20px;
    }
  }

  .prove-title {
    padding: 16px 0;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    line-height: 19px;
  }
</style>
